<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择简历 - 人才职业生涯规划平台</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        /* 基础样式 */
        body {
            background-color: #f5f7fa;
            color: #333;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            margin: 0;
            padding: 0;
            font-size: 14px;
        }
        
        .app-container {
            max-width: 375px; /* 标准小程序尺寸 */
            margin: 0 auto;
            background-color: #f5f7fa;
            min-height: 100vh;
            padding-bottom: 70px; /* 为底部按钮预留空间 */
        }
        
        /* 头部导航 */
        .page-header {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            background-color: #fff;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .back-button {
            border: none;
            background: none;
            font-size: 18px;
            color: #333;
            padding: 0;
            margin-right: 12px;
            display: flex;
            align-items: center;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        
        .page-title {
            font-size: 16px;
            font-weight: 600;
            flex: 1;
            text-align: center;
            margin: 0;
        }
        
        /* 职位信息 */
        .job-info {
            background-color: #fff;
            padding: 16px;
            margin-bottom: 10px;
        }
        
        .job-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin: 0 0 4px 0;
        }
        
        .company-name {
            font-size: 14px;
            color: #666;
            margin: 0 0 4px 0;
        }
        
        .job-salary {
            font-size: 14px;
            color: #ff6b6b;
            margin: 0;
        }
        
        /* 提示信息 */
        .tips {
            background-color: #fff;
            padding: 12px 16px;
            margin-bottom: 10px;
        }
        
        .tips-title {
            font-size: 15px;
            font-weight: 600;
            color: #333;
            margin: 0 0 8px 0;
        }
        
        .tips-content {
            font-size: 13px;
            color: #666;
            line-height: 1.6;
            margin: 0;
        }
        
        /* 简历列表 */
        .resume-list {
            background-color: #fff;
            padding: 16px;
        }
        
        .resume-list-title {
            font-size: 15px;
            font-weight: 600;
            color: #333;
            margin: 0 0 12px 0;
        }
        
        .resume-item {
            border: 1px solid #eee;
            border-radius: 8px;
            padding: 14px;
            display: flex;
            align-items: flex-start;
            margin-bottom: 12px;
            position: relative;
        }
        
        .resume-item.selected {
            border-color: #4863dc;
            background-color: #f8f9ff;
        }
        
        .resume-icon {
            width: 40px;
            height: 40px;
            background-color: #f8f9ff;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            color: #4863dc;
            font-size: 20px;
        }
        
        .resume-content {
            flex: 1;
        }
        
        .resume-name {
            font-size: 15px;
            font-weight: 500;
            color: #333;
            margin: 0 0 4px 0;
        }
        
        .resume-meta {
            font-size: 12px;
            color: #999;
            margin: 0;
        }
        
        .resume-status {
            font-size: 12px;
            color: #52c41a;
            margin-top: 8px;
        }
        
        .resume-check {
            position: absolute;
            right: 14px;
            top: 14px;
            color: #4863dc;
            font-size: 20px;
            display: none;
        }
        
        .resume-item.selected .resume-check {
            display: block;
        }
        
        .new-resume {
            display: flex;
            align-items: center;
            padding: 14px;
            border: 1px dashed #ddd;
            border-radius: 8px;
            color: #4863dc;
        }
        
        .new-resume-icon {
            width: 40px;
            height: 40px;
            background-color: #f8f9ff;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            color: #4863dc;
            font-size: 20px;
        }
        
        .new-resume-text {
            font-size: 15px;
            color: #4863dc;
        }
        
        /* 底部按钮 */
        .apply-button-container {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #fff;
            padding: 12px 16px;
            padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
            box-shadow: 0 -1px 4px rgba(0,0,0,0.05);
            z-index: 100;
            max-width: 375px;
            margin: 0 auto;
        }
        
        .apply-button {
            display: block;
            width: 100%;
            height: 44px;
            line-height: 44px;
            text-align: center;
            background-color: #4863dc;
            color: white;
            font-size: 16px;
            font-weight: 500;
            border-radius: 4px;
            border: none;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        
        .apply-button:active {
            opacity: 0.85;
        }
        
        .apply-button:disabled {
            background-color: #b5bedd;
            opacity: 0.8;
            cursor: not-allowed;
        }
        
        /* 加载和提示样式 */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.8);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        
        .loading-spinner {
            width: 36px;
            height: 36px;
            border: 3px solid rgba(72, 99, 220, 0.2);
            border-radius: 50%;
            border-top-color: #4863dc;
            animation: spin 0.8s linear infinite;
            margin-bottom: 10px;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .loading-text {
            font-size: 14px;
            color: #666;
        }
        
        .toast-message {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px 16px;
            border-radius: 4px;
            font-size: 14px;
            z-index: 1001;
            animation: fadeInOut 2.5s ease forwards;
        }
        
        @keyframes fadeInOut {
            0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
            50% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
            100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 头部导航 -->
        <header class="page-header">
            <button class="back-button" onclick="history.back()">
                <i class="bi bi-chevron-left"></i>
            </button>
            <h1 class="page-title">选择简历</h1>
        </header>
        
        <!-- 职位信息 -->
        <section class="job-info">
            <h2 class="job-title" id="job-title">前端开发工程师</h2>
            <p class="company-name" id="company-name">字节跳动</p>
            <p class="job-salary" id="job-salary">20k-30k · 14薪</p>
        </section>
        
        <!-- 投递提示 -->
        <section class="tips">
            <h3 class="tips-title">投递须知</h3>
            <p class="tips-content">
                为提高简历投递的效果，请确保您选择的简历与申请职位相匹配，完善简历内容可提高简历的通过率。
            </p>
        </section>
        
        <!-- 简历列表 -->
        <section class="resume-list">
            <h3 class="resume-list-title">选择一份简历</h3>
            
            <!-- 简历1 -->
            <div class="resume-item selected" data-resume-id="1">
                <div class="resume-icon">
                    <i class="bi bi-file-earmark-text"></i>
                </div>
                <div class="resume-content">
                    <h4 class="resume-name">标准简历</h4>
                    <p class="resume-meta">更新于 2023-05-10</p>
                    <div class="resume-status">
                        <i class="bi bi-check-circle"></i> 完善度100%
                    </div>
                </div>
                <div class="resume-check">
                    <i class="bi bi-check-circle-fill"></i>
                </div>
            </div>
            
            <!-- 简历2 -->
            <div class="resume-item" data-resume-id="2">
                <div class="resume-icon">
                    <i class="bi bi-file-earmark-text"></i>
                </div>
                <div class="resume-content">
                    <h4 class="resume-name">校招简历</h4>
                    <p class="resume-meta">更新于 2023-04-05</p>
                    <div class="resume-status" style="color: #faad14;">
                        <i class="bi bi-exclamation-circle"></i> 完善度80%
                    </div>
                </div>
                <div class="resume-check">
                    <i class="bi bi-check-circle-fill"></i>
                </div>
            </div>
            
            <!-- 简历3 -->
            <div class="resume-item" data-resume-id="3">
                <div class="resume-icon">
                    <i class="bi bi-file-pdf"></i>
                </div>
                <div class="resume-content">
                    <h4 class="resume-name">附件简历.pdf</h4>
                    <p class="resume-meta">上传于 2023-03-20</p>
                </div>
                <div class="resume-check">
                    <i class="bi bi-check-circle-fill"></i>
                </div>
            </div>
            
            <!-- 创建新简历 -->
            <div class="new-resume" id="create-resume">
                <div class="new-resume-icon">
                    <i class="bi bi-plus-lg"></i>
                </div>
                <div class="new-resume-text">创建新简历</div>
            </div>
        </section>
        
        <!-- 底部应用按钮 -->
        <div class="apply-button-container">
            <button class="apply-button" id="submit-button">立即投递</button>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取URL参数
            const urlParams = new URLSearchParams(window.location.search);
            const jobId = urlParams.get('job_id') || '1001';
            let selectedResumeId = '1'; // 默认选择第一个简历
            
            // 职位信息
            const jobTitles = {
                '1001': '前端开发工程师',
                '1002': '产品经理',
                '1003': '后端开发工程师',
                '1004': '数据分析师'
            };
            
            const companyNames = {
                '1001': '字节跳动',
                '1002': '腾讯',
                '1003': '阿里巴巴',
                '1004': '百度'
            };
            
            const jobSalaries = {
                '1001': '20k-30k · 14薪',
                '1002': '15k-25k · 13薪',
                '1003': '25k-40k · 16薪',
                '1004': '18k-30k · 14薪'
            };
            
            // 填充职位信息
            document.getElementById('job-title').textContent = jobTitles[jobId] || '未知职位';
            document.getElementById('company-name').textContent = companyNames[jobId] || '未知公司';
            document.getElementById('job-salary').textContent = jobSalaries[jobId] || '';
            
            // 简历选择功能
            const resumeItems = document.querySelectorAll('.resume-item');
            resumeItems.forEach(item => {
                item.addEventListener('click', function() {
                    // 移除之前的选中状态
                    resumeItems.forEach(i => i.classList.remove('selected'));
                    // 设置当前选中状态
                    this.classList.add('selected');
                    // 保存选中的简历ID
                    selectedResumeId = this.getAttribute('data-resume-id');
                });
            });
            
            // 创建新简历
            document.getElementById('create-resume').addEventListener('click', function() {
                showToast('正在创建新简历...');
                
                // 模拟跳转到创建简历页面
                setTimeout(() => {
                    window.location.href = 'resume-create.html?redirect=resume-select&job_id=' + jobId;
                }, 800);
            });
            
            // 提交申请
            document.getElementById('submit-button').addEventListener('click', function() {
                if (!selectedResumeId) {
                    showToast('请选择要投递的简历');
                    return;
                }
                
                // 显示加载状态
                showLoading();
                
                // 模拟网络请求
                setTimeout(() => {
                    hideLoading();
                    
                    // 生成应用ID
                    const applicationId = 'APP' + new Date().getTime();
                    
                    // 跳转到申请成功页面
                    window.location.href = 'resume-success.html?job_id=' + jobId + '&application_id=' + applicationId;
                }, 1500);
            });
        });
        
        // 显示加载状态
        function showLoading() {
            if (!document.querySelector('.loading-overlay')) {
                const loadingEl = document.createElement('div');
                loadingEl.className = 'loading-overlay';
                loadingEl.innerHTML = '<div class="loading-spinner"></div><div class="loading-text">处理中...</div>';
                document.body.appendChild(loadingEl);
            }
        }
        
        // 隐藏加载状态
        function hideLoading() {
            const loadingEl = document.querySelector('.loading-overlay');
            if (loadingEl) {
                document.body.removeChild(loadingEl);
            }
        }
        
        // 显示提示消息
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'toast-message';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            // 自动消失
            setTimeout(() => {
                document.body.removeChild(toast);
            }, 2500);
        }
    </script>
</body>
</html> 